<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="/wutoon-trans/static/css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/wutoon-trans/index">Home</a></li>
            <li class="breadcrumb-item"><a href="/wutoon-trans/v1/book/index">Book</a></li>
            <li class="breadcrumb-item active" aria-current="page">chapters</li>
        </ol>
    </nav>
    <hr>
    <div class="container" id="chapters_list">
        <div class="row">
            <div class="col-5">
                章节
            </div>
            <div class="col">
                进度
            </div>
            <dianyifv class="col">
               操作
            </dianyifv>
        </div>
    </div>

</div>






<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

<!-- 包含 Popper 的 Bootstrap 集成包 -->
<script src="/wutoon-trans/static/js/jquery/jquery-3.6.1.min.js"></script>
<script src="/wutoon-trans/static/js/bootstrap/bootstrap.bundle.min.js"></script>

<script>
    $(function(){
        var urlQuery = getUrlQuery(window.location.href);
        $.ajax({url:"/wutoon-trans/v1/book/"+urlQuery.bookId+"/chapters",
            success:function(result){
                var bookListHtml = "";
                for(var i=0; i<result.data.length; i++) {
                    bookListHtml += "<div class=\"row\">";
                    bookListHtml += "<div class=\"col-5\">" + result.data[i].title +"</div>";
                    bookListHtml += "<div class=\"col\">" + result.data[i].status +"</div>";
                    bookListHtml += "<div class=\"col\"><a href='/wutoon-trans/v1/book/chapter/detail?bookId="+result.data[i].bookId+"&chapterId="+result.data[i].id+"'>翻译</a></div>";
                    bookListHtml += "</div>";
                }
                $("#chapters_list").append(bookListHtml);
                console.log(bookListHtml)
            }
        });
    });

    function getUrlQuery(url) {
        var str = url.substr(url.indexOf('?') + 1);
        var json = new Object();
        const arr = str.split('&')
        for(var i = 0; i < arr.length; i++) {
            var item = arr[i].split('=')
            json[item[0]] = item[1]
        }
        return json
    }
</script>
</body>
</html>
